import { useEffect } from 'react';
import { useSelector, useStore } from 'react-redux';

import { findCinemas } from '@/api/MaiZuo';

import { changeCinemaList } from '../redux/features/cinemaSlice';

export const useCinemaList = () => {
  const cityId = useSelector((state) => state.CityReducer.id);
  const cityName = useSelector((state) => state.CityReducer.name);
  const list = useSelector((state) => state.CinemaReducer.list);

  const { dispatch } = useStore();

  useEffect(() => {
    list.length === 0 &&
      findCinemas(cityId).then((res) => {
        dispatch(changeCinemaList(res.cinemas));
      });
    return () => {};
  }, [cityId, list.length, dispatch]);

  return {
    cityName,
    list,
  };
};
